<template>
    <div class="page page_container">
       <div class="list bgcwhite borderbottom borderbox" v-for="(item,index) in bankList" :key='index'>
            <div class="bankname">
                <span class="yuan"></span>
                <span class="title">{{item.certType}}</span>
            </div>
            <div class="banknum">{{item.bankCardNo}}</div>
            <div class="phone_last">手机尾号：{{item.phone}}</div> 
       </div> 
       <div v-if="bankList.length == '0'" class="addbank borderbox bgcwhite" @click="goAddBank">
         <span>+</span>&nbsp;添加银行卡
       </div>
    </div>
</template>
<script>
import { Cell,MessageBox } from 'mint-ui';
import {getBankCardList} from "src/methods/request.js";
export default {
  // 最顶部黑色栏
  data () {
    return {
      integral:"",
      bankList:[]
    }
  },
  components: {
  },
  created(){
      this.$store.commit('increment',"银行卡");
      this.getBankList();
  },
  methods:{
      getBankList(){
            getBankCardList({}).then(res => {
                this.$vux.loading.hide()
                if(res.rspCode == '0000'){
                    this.bankList = res.data.userBankCard || [];
                }else{
                    Toast({ message: '获取银行卡列表失败',position: 'middle',duration: 3000});
                }
            }).catch(error => {
                console.log(error);
                this.$vux.loading.hide();
            } );
      },
      goAddBank(){
           this.$router.push({
              path:"/addBank"
           })
      }
  }
};
</script>
<style lang="less" scoped>
@import "~src/components/css/gloState.less";
.page{ 
    padding-top:0rem !important;
    .list{
        width: 92%;
        margin: 20px 4% 0 4%;
        padding: @padding_left_right;
        text-align: left;
        height: 195px;
        color:#ffffff;
        border-radius: 15px;
        position: relative;
    }
    .list:nth-child(1){
        background: url(../../assets/bankground.png) no-repeat;
        background-size:100% 100%;
    }
    .bankname{
        position: absolute;
        left: 1.5rem;
        top: 1.5rem;
    }
    .yuan{
        display: inline-block;
        width: 3rem;
        height: 3rem;
        background: #ffffff;
        border-radius: 100%;
        float: left;
    }
    .title{
       display: inline-block;
        height: 3rem;
        line-height: 2rem; 
        text-indent: 0.5rem;
    }
    .phone_last{
        position: absolute;
        right: 1.5rem;
        top: 1.9rem;
    }
    .banknum{
        position: absolute;
        left: 2.5rem;
        bottom: 2rem;
    }
    .addbank{
        text-align: left;
        width: 90%!important;
        height:40px;
        border-radius: 10px;
        margin: 20px 5% 0 5%; 
        display: flex;
        align-items: center;
        font-size: 16px;
        padding-left: 20px;
        span{
            font-size: 25px;
            font-weight: bolder;
        }
    }
}
</style>
